import React, { Component } from "react";
import "./style.css";
// input 组件 组件命名遵循大驼峰命名

class InputFun extends Component {
  render() {
    return (
      <input
        placeholder="请输入相关信息........"
        type={this.props.typeText}
        id={this.props.typeText}
        onChange={this.props.onSetState}
      />
    );
  }
}

class Login extends Component {
  componentDidMount() {
    // 初始化清除参数
  }
  constructor() {
    super();
    this.state = {
      username: "",
      password: "",
    };
    this.loginFun = this.loginFun.bind(this);
  }
  onSetState = (e) => {
    // target.id 获取焦点id
    // console.log(e.target.id);
    // console.log(this.state[e.target.id]);
    this.state[e.target.id] = e.target.value;
  };
  loginFun = () => {
    alert("此功能暂不允许使用");
    /*
    if (this.state.username === "") {
      alert("请输入用户名");
      return;
    }
    if (this.state.password === "") {
      alert("请输入密码");
      return;
    }
    var logIndata = {
      username: this.state.username,
      password: this.state.password,
    };

    // console.log(logIndata);
    // this.props.history.push("/homepage");
    this.props.history.push({
      pathname: "/homepage/" + JSON.stringify(logIndata),
    });
    */
  };
  goLifeCycle = () => {
    this.props.history.push("/LifeCycle");
  };
  render() {
    return (
      <div className="ContentClass">
        <div className="input_name">
          用户名：
          <InputFun
            typeText="username"
            onSetState={this.onSetState.bind(this)}
          />
        </div>

        <div className="input_name">
          登录口令：
          <InputFun
            typeText="password"
            onSetState={this.onSetState.bind(this)}
          />
        </div>
        <button disabled={true} onClick={this.loginFun.bind()}>登录</button>
        <div>
          <button
            style={{ width: 100 + "px", height: 30 + "px" }}
            onClick={this.goLifeCycle.bind()}
          >
            {"  goLifeCycle "}
           
          </button>
        </div>
      </div>
    );
  }
}
export default Login;
